<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <button @click="pathToMyMusic">点击跳转至我的音乐</button>
    <p>{{$route.query.music}}</p>
</div>
  
</template>

<script>
export default {
    name:"FindPage",
    methods: {
      pathToMyMusic(){
        this.$router.push({
          //  path:'/myMusic/香风智乃'
          //通过路径方式跳转
           name:'msc',
           params:{
            music:'我测你们码'
           }
          //通过路由命名方式跳转
        })
        // this.$router.push({
        //   path:"/find",
        //   query:{
        //     music:"笑薛distance"
        //   }
        // })
        //this.$router.push('/find?music=烟distance') 方法二
        //过路径方式跳转 query传参方式实例 
      }
    },
}
</script>

<style scope>
  button{
    margin-left: 30px;
    background-color: rgb(252,61,73);
    color: white;
    width: 300px;
    height: 30px;
    font-size: 1em;
    border-radius: 15px;
    border: 0px;
    box-shadow: 0px 2px 1px 1px rgba(66, 66, 66,.7);
    transition: all .5s ease-in-out;
  }
  button:hover{
    box-shadow: none;
  }
</style>